/* ---------- 下拉列 ---------- */
(function () {
    $(".mi-nav-item").hover(function () {
        $(".chinese-menu").stop().slideDown();
    }, function () {
        $(".chinese-menu").stop().slideUp();
    })
    
    let chinese = document.querySelector(".chinese");
    let chinese_li = document.querySelectorAll(".chinese-menu ul li");
    for (let i = 0; i < chinese_li.length; i++){
        chinese_li[i].onmouseover = function () {
            for (let j = 0; j < chinese_li.length; j++){
                chinese_li[j].className = "";
            }
            this.className = "chinese-sel";
        }

        chinese_li[i].onmouseout = function () {
            this.className = "";
        }

        chinese_li[i].onclick = function () {
            chinese.innerHTML = this.innerHTML;
        }
    }
})();

/* 登录 和 二维码 切换 */
(function () {
    const btn_tab = $(".btn-tab");
    const login_register = $(".login-register");
    const pvg_box = $(".pvg-box");
    
    btn_tab.on("click", function () {
        if ($(this).hasClass("img-pvg")) {
            $(this).removeClass("img-pvg");
            $(this).addClass("img-com");

            login_register.hide();
            pvg_box.show();
        } else {
            $(this).removeClass("img-com");
            $(this).addClass("img-pvg");

            pvg_box.hide();
            login_register.show();
        }
    })
})();

/* ---------- 登录注册切换 ---------- */
class Switch{
    // 获取节点的方法
    getEle(tag, single = true) {
        // 单个节点对象
        if (single) {
            return document.querySelector(tag);
        } else {
            // 多个节点对象
            return document.querySelectorAll(tag);
        }
    }

    constructor() {
        this.lore = this.getEle(".lore");
        this.login_tab = this.lore.children[0];
        this.register_tab = this.lore.children[1];

        this.login_box = this.getEle(".tabs-login");
        this.register_box = this.getEle(".tabs-register");

        this.addEvent();
    }
    addEvent() {
        const that = this;
        this.login_tab.addEventListener("click", function () {
            that.login_tab.className = "tab-active";
            that.register_tab.className = "";
            that.login_box.style.display = "block";
            that.register_box.style.display = "none"
        })
        this.register_tab.addEventListener("click", function () {
            that.login_tab.className = "";
            that.register_tab.className = "tab-active";
            that.login_box.style.display = "none";
            that.register_box.style.display = "block";
        })
    }
}
new Switch();

/* ---------- 页面上的所有输入框事件 ---------- */
class Input_Id{
    constructor(ops) {
        this.input = ops.input;
        this.addEvent();
    }
    addEvent() {
        for (let i = 0; i < this.input.length; i++){
            if (this.input[i].type === "text" || this.input[i].type === "password") {
                this.input[i].onfocus = function () {
                    // console.log(this.nextElementSibling.tagName);
                    if (this.nextElementSibling.tagName === "LABEL") {
                        this.nextElementSibling.style.fontSize = "12px";
                        this.nextElementSibling.style.top = "6px";
                        this.nextElementSibling.style.color = "#aaa"
                    }
                }

                this.input[i].onblur = function () {
                    if (this.nextElementSibling.tagName === "LABEL") {
                        if (this.value === "") {
                            this.nextElementSibling.style.fontSize = "17px";
                            this.nextElementSibling.style.top = "20px";
                            this.parentNode.style.color = "rgba(0, 0, 0, 0.4);";
                        }
                    }
                }
            }
        }
    }
}
new Input_Id({
    input: document.querySelectorAll("input"),
})

/* ---------- 登录功能 ---------- */
class Login{
    constructor(ops) {
        this.login_ID = ops.login_ID;
        this.login_pass = ops.login_pass;
        this.login_btn = ops.login_btn;
        this.url = ops.url;

        this.addEvent();
    }

    addEvent() {
        this.login_btn.addEventListener("click", () => {
            this.Reload();
        })
    }

    Reload() {
        ajax({
            type: "get",
            url: this.url,
            data: {
                type: "login",
                username: this.login_ID.value,
                password:this.login_pass.value,
            },
            success: (res) => {
                console.log(res);
                res = JSON.parse(res);
                console.log(res);

                if (res.code === 2) {
                    if (confirm("用户名不存在，是否跳转到注册")) {
                        location.href = "../html/Register.html";
                    }
                } else if (res.code === 0) {
                    alert("密码不正确");
                    this.login_pass.value = "";
                    this.login_pass.focus();
                } else if (res.code === 1) {

                    localStorage.setItem("state", "ok");
                    localStorage.setItem("user", res.data.username);

                    if (confirm("登录成功，是否跳转到首页")) {
                        location.href = "../html/Index.html";
                    }
                }
            },
        })
    }
}
new Login({
    login_ID: document.getElementById("xiaomi_id"),
    login_pass: document.getElementById("xiaomi_password"),
    login_btn: document.getElementsByClassName("mi-button")[0],
    url: "http://localhost:3000/api1",
});